<template>
  <div id="app">
    <div ref="htmlContent" id="htmlContent">
      <button @click="goTo">指定位置</button>
      <button @click="goBfter">第一个</button>
      <button @click="goAfter">第二个</button>
      <button @click="goAfter2">第三个</button>
      <crossTextHighLight
          ref="search"
          :move-behavior="true"
          @current-change="currentChange"
          :content="text"
          :keyword="keyword"
          :is-need-mark="true"
          :pEle="`htmlContent`"
          @match-count-change="matchCountChange"
          :highlightStyle="`background: #ffff00`"
          :currentStyle="`background: rgb(224, 234, 250)`"
          @selection-change="selectionChange"
      />

    </div>
  </div>
</template>

<script>
import crossTextHighLight from "@/components/crossTextHighLight/index.vue";
export default {
  name: 'App',
  components: {
    crossTextHighLight
  },
  data(){
    return {
      text: `
            春江花月夜
                [唐] 张若虚
      春江潮水连海平，海上明<b>月</b>共潮生。
      滟滟随波千万里，何处春江无月明！
      江流宛转绕芳甸，月照花林皆似霰；
      空里流霜不觉飞，汀上白沙看不见。
      江天一色无纤尘，皎皎空中孤月轮。
      江畔何人初见月？江月何年初照人？
      人生代代无穷已，江月年年望相似。
      不知江月待何人，但见长江送流水。
      白云一片去悠悠，青枫浦上不胜愁。
      谁家今夜扁舟子？何处相思明<b>月</b>楼？
      可怜楼上月徘徊，应照离人妆镜台。
      玉户帘中卷不去，捣衣砧上拂还来。
      此时相望不相闻，愿逐月华流照君。
      鸿雁长飞光不度，鱼龙潜跃水成文。
      昨夜闲潭梦落花，可怜春半不还家。
      江水流春去欲尽，江潭落月复西斜。
      斜月沉沉藏海雾，碣石潇湘无限路。
      不知乘月几人归，落月摇情满江树。春江花月夜
                [唐] 张若虚
      春江潮水连海平，海上明<b>月</b>共潮生。
      滟滟随波千万里，何处春江无月明！
      江流宛转绕芳甸，月照花林皆似霰；
      空里流霜不觉飞，汀上白沙看不见。
      江天一色无纤尘，皎皎空中孤月轮。
      江畔何人初见月？江月何年初照人？
      人生代代无穷已，江月年年望相似。
      不知江月待何人，但见长江送流水。
      白云一片去悠悠，青枫浦上不胜愁。
      谁家今夜扁舟子？何处相思明<b>月</b>楼？
      可怜楼上月徘徊，应照离人妆镜台。
      玉户帘中卷不去，捣衣砧上拂还来。
      此时相望不相闻，愿逐月华流照君。
      鸿雁长飞光不度，鱼龙潜跃水成文。
      昨夜闲潭梦落花，可怜春半不还家。
      江水流春去欲尽，江潭落月复西斜。
      斜月沉沉藏海雾，碣石潇湘无限路。
      不知乘月几人归，落月摇情满江树。春江花月夜
                [唐] 张若虚
      春江潮水连海平，海上明<b>月</b>共潮生。
      滟滟随波千万里，何处春江无月明！
      江流宛转绕芳甸，月照花林皆似霰；
      空里流霜不觉飞，汀上白沙看不见。
      江天一色无纤尘，皎皎空中孤月轮。
      江畔何人初见月？江月何年初照人？撒大多数
      人生代代无穷已，江月年年望相似。
      不知江月待何人，但见长江送流水。
      白云一片去悠悠，青枫浦上不胜愁。
      谁家今夜扁舟子？何处相思明<b>月</b>楼？
      可怜楼上月徘徊，应照离人妆镜台。
      玉户帘中卷不去，捣衣砧上拂还来。
      此时相望不相闻，愿逐月华流照君。
      鸿雁长飞光不度，鱼龙潜跃水成文。
      昨夜闲潭梦落花，可怜春半不还家。
      江水流春去欲尽，江潭落月复西斜。
      斜月沉沉藏海雾，碣石潇湘无限路。
      不知乘月几人归，落月摇情满江树。 江水流春去欲尽，江潭落月复西斜。
      斜月沉沉藏海雾，碣石潇湘无限路。
      不知乘月几人归，落月摇情满江树。 江水流春去欲尽，江潭落月复西斜。
      斜月沉沉藏海雾，碣石潇湘无限路。
      不知乘月几人归，落月摇情满江树。 江水流春去欲尽，江潭落月复西斜。
      斜月沉沉藏海雾，碣石潇湘无限路。
      不知乘月几人归，落月摇情满江树。 江水流春去欲尽，江潭落月复西斜。
      斜月沉沉藏海雾，碣石潇湘无限路。
      不知乘月几人归，落月摇情满江树。撒大多数`,
      keyword: "江月",
      matchCount: 0,
    }
  },
  methods: {
    currentChange(){

    },
    selectionChange(text, x, y){
      console.log('文本， x， y：' ,text, x, y);
    },
    matchCountChange (count) {
      this.matchCount = count
    },
    goTo(){
      this.keyword = "撒大多数"
      console.log(this.$refs.search)
      this.$refs.search.scrollToOrder(2,this.$refs.search)
    },
    goBfter(){
      this.$refs.search.scrollToOrder(1,this.$refs.search)
    },
    goAfter(){
      this.$refs.search.scrollToOrder(2,this.$refs.search)
    },
    goAfter2(){
      this.$refs.search.scrollToOrder(3,this.$refs.search)
    }
  }
}
</script>

<style>
*{
  line-height: 80px;
}
#htmlContent{
  height: 600px;
  overflow-y: auto;
}
</style>
